Building a Simple E-commerce Store with Django and Bootstrap

-

 


Creating an e-commerce store from scratch using Django and Bootstrap can be a great way to learn full-stack development. This article will guide you through setting up a simple online store with product listings, a shopping cart, and a checkout process.

Prerequisites

Before we start, ensure you have the following installed:

  • Python (>=3.8)

  • Django (>=4.0)

  • Bootstrap (via CDN or static files)

  • SQLite (default Django database)

  • Virtual environment (optional but recommended)

Step 1: Setting Up the Django Project

Create a Virtual Environment

python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`

Install Django

pip install django

Create a New Django Project

django-admin startproject ecommerce
cd ecommerce

Start the Development Server

python manage.py runserver

Now, visit http://127.0.0.1:8000/ to verify Django is working.

Step 2: Create the Store App

python manage.py startapp store

Register the App in settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'store',
]

Step 3: Define the Product Model

In store/models.py:

from django.db import models
class Product(models.Model):
    name = models.CharField(max_length=255)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    image = models.ImageField(upload_to='products/')
    def __str__(self):
        return self.name

Run migrations:

python manage.py makemigrations
python manage.py migrate

Step 4: Create the Product Views

In store/views.py:

from django.shortcuts import render
from .models import Product
def product_list(request):
    products = Product.objects.all()
    return render(request, 'store/product_list.html', {'products': products})

Step 5: Configure URLs

In ecommerce/urls.py:

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('store.urls')),
]

Create store/urls.py:

from django.urls import path
from .views import product_list
urlpatterns = [
    path('', product_list, name='product_list'),
]

Step 6: Create Product List Template

In store/templates/store/product_list.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Product List</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Products</h1>
        <div class="row">
            {% for product in products %}
                <div class="col-md-4">
                    <div class="card mb-4">
                        <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text">{{ product.description }}</p>
                            <p class="card-text">${{ product.price }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>

Step 7: Add Shopping Cart Functionality

Create a Cart model in store/models.py:

class Cart(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.PositiveIntegerField(default=1)

Create a cart_add view:

def cart_add(request, product_id):
    product = Product.objects.get(id=product_id)
    cart_item, created = Cart.objects.get_or_create(product=product)
    cart_item.quantity += 1
    cart_item.save()
    return redirect('product_list')

Update store/urls.py:

from .views import cart_add
urlpatterns += [
    path('cart/add/<int:product_id>/', cart_add, name='cart_add'),
]

Step 8: Create Checkout Process

Define a checkout view in store/views.py:

def checkout(request):
    cart_items = Cart.objects.all()
    total = sum(item.product.price * item.quantity for item in cart_items)
    return render(request, 'store/checkout.html', {'cart_items': cart_items, 'total': total})

Create store/templates/store/checkout.html:

{% for item in cart_items %}
    <p>{{ item.product.name }} - {{ item.quantity }} x ${{ item.product.price }}</p>
{% endfor %}
<p>Total: ${{ total }}</p>

Update store/urls.py:

urlpatterns += [
    path('checkout/', checkout, name='checkout'),
]

Step 9: Deploy the Store

Use Django's built-in server for local testing:

python manage.py runserver

For production, consider deploying with platforms like Heroku, DigitalOcean, or AWS.

Conclusion

This article provided a step-by-step guide to building a simple e-commerce store using Django and Bootstrap. You can extend this by adding user authentication, payment integration, and order history. Happy coding!

Comments

Post a Comment

Popular posts from this blog

Best Laptops for Programming and Development in 2025

-
Image
Introduction In 2025, the demand for high-performance laptops for programming and development continues to grow. Whether you are a software engineer, web developer, data scientist, or game developer, having the right laptop can significantly impact your productivity. This guide explores the best laptops for programming and development in 2025, considering performance, battery life, display quality, portability, and overall value for money. Key Factors to Consider Before diving into the list of top laptops, it is essential to understand the key factors to consider when choosing a laptop for programming: Processor (CPU) : A powerful processor, such as an Intel Core i7/i9 or AMD Ryzen 7/9, ensures smooth performance for compiling code and running multiple applications. RAM : At least 16GB of RAM is recommended, while 32GB or more is ideal for heavy workloads like virtual machines and large-scale applications. Storage : SSDs (Solid State Drives) are a must for fast boot times and applicati...
Read more

First-Class Flight Suites: What Makes Them Exceptional

-
Image
Flying first class is more than just a luxurious travel experience—it’s a statement of comfort exclusivity, and top-tier service. Airlines around the world continuously push the boundaries of opulence, offering first-class suites that rival five-star hotels. Here’s an in-depth look at what makes first-class flight suites extraordinary and worth the premium price. 1. Unmatched Privacy and Space First-class suites are designed to provide a private, tranquil space for travelers. Unlike traditional business class seating, these suites often come with fully enclosed cabins, offering doors or partitions that create a sense of exclusivity. Airlines like Emirates, Singapore Airlines, and Etihad have taken privacy to the next level with floor-to-ceiling doors and individual mini-suites. 2. Lie-Flat Beds and Ultimate Comfort A major differentiator in first-class suites is the ability to transform seats into fully lie-flat beds. Airlines ensure premium bedding, high-thread-count linens, and memor...
Read more

Mastering Node.js: A Comprehensive Guide to Building Scalable and Efficient Applications

-
Image
  Node.js has revolutionized the way developers build web applications. Its non-blocking, event-driven architecture makes it an ideal choice for building scalable and high-performance applications. Whether you're a beginner or an experienced developer, this guide will take you through everything you need to know about Node.js, from its core concepts to advanced techniques for building real-world applications. Table of Contents Introduction to Node.js Why Use Node.js? Setting Up Node.js Core Concepts of Node.js Event Loop Non-Blocking I/O Modules and NPM Building a Simple Web Server Working with Express.js Handling Data with Databases MongoDB MySQL Authentication and Authorization Real-Time Applications with WebSockets Deploying Node.js Applications Performance Optimization Techniques Best Practices for Node.js Development Conclusion 1. Introduction to Node.js Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to build server-side and net...
Read more